<!--
  路线图组件
  展示发展路线图，显示年份和对应的事件
-->
<template>
  <div class="roadmap">
    <div class="milestone" v-for="(item, index) in milestones" :key="index">
      <div class="year">{{ item.year }}</div>
      <div class="event">{{ item.event }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    milestones: {
      type: Array,
      required: true
    }
  }
};
</script>

<style scoped>
.roadmap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #ffffff; /* 白色背景 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.milestone {
  display: flex;
  align-items: center;
}
.year {
  color: #00ff7f; /* 霓虹色 */
  font-weight: bold;
  margin-right: 10px;
}
.event {
  color: #333; /* 深色文字 */
}
</style>